<template>
  <div >
    <Row>
      <Col span="12">
      <div style="height: 100px;width: 100%;">
        <Card style="width:99%;">
          <div style="display: flex;">
            <img src="https://projectvue.oss-cn-hangzhou.aliyuncs.com/wd.7cc65174.png" height="70px" width="70px" />
            <div style="margin-left: 2%;margin-top: 3%;">
              <p>{{ homedata.pconame}}</p>
              <p style="font-size: 10px;color: #909399;">{{homedata.pa1name+'/'+homedata.pa2name+'/'+homedata.pa3name+'/'+homedata.address}}</p>
            </div>
            <div style="margin-left: 26%;margin-top: 3%;text-align: center;">
              <p style="margin-bottom: 12%;color: #409EFF;font-weight: bolder;">{{homedata.orgCount}}</p>
              <p>下属机构</p>
            </div>
            <div style="margin-left: 10%;margin-top: 3%;text-align: center;">
              <p style="margin-bottom: 12%;color: #409EFF;font-weight: bolder;">{{homedata.staffCount}}</p>
              <p>系统员工</p>
            </div>
          </div>
        </Card>
      </div>
      </Col>

      <Col span="12">
      <div>
        <Card style="width:99%">
          <div style="display: flex;height: 60px;margin-top: 2%;">
            <img src="https://projectvue.oss-cn-hangzhou.aliyuncs.com/%E4%B8%8B%E8%BD%BD.png" height="50px" width="50px"
              style="margin-left: 5%;" />
            <div style="margin-top: 1%;margin-left: 2%;text-align: left;">
              <p style="margin-bottom: 2%;color: #F56C6C;font-weight: bolder;">{{ homedata.scopejobCount }}</p>
              <p>待分配作业范围</p>
            </div>

            <img src="https://projectvue.oss-cn-hangzhou.aliyuncs.com/%E4%B8%8B%E8%BD%BD%20%281%29.png" height="50px"
              width="50px" style="margin-left: 7%;" />
            <div style="margin-top: 1%;margin-left: 2%;text-align: left;">
              <p style="margin-bottom: 2%;color: #F56C6C;font-weight: bolder;">{{ homedata.pickuptodoCount }}</p>
              <p>取件待办</p>
            </div>

            <img src="https://projectvue.oss-cn-hangzhou.aliyuncs.com/%E4%B8%8B%E8%BD%BD%20%282%29.png" height="50px"
              width="50px" style="margin-left: 7%;" />
            <div style="margin-top: 1%;margin-left: 2%;text-align: left;">
              <p style="margin-bottom: 2%;color: #F56C6C;font-weight: bolder;">{{ homedata.sendthingsCount }}</p>
              <p>派件待办</p>
            </div>
          </div>
        </Card>
      </div>
      </Col>

      <Col span="12">
      <Card style="width:99%;margin-top: 1%;">
        <template>
          订单总量
        </template>
        <highcharts :options="chartOptions"></highcharts>
      </Card>
      </Col>

      <Col span="12">
      <Card style="width:99%;margin-top: 1%;">
        <template>
          订单分布
        </template>
        <!-- <iframe width="100%" height="450" src="https://jshare.com.cn/highmaps/FSSm7A/62/share" allowfullscreen="allowfullscreen" frameborder="0"></iframe> -->
        <!-- 中国地图 -->
        <div>
          <div class="map-box" ref="chinaMap" style="height: 400px;width: 100%;" />
        </div>
      </Card>
      </Col>

      <Col span="24" >
      <Card style="width:100%;margin-top: 1%;">
        <template>
          作业信息
        </template>

        <div style="display: flex;margin-bottom: 2%; ">

          <Card
            style="width: 10%;margin-left: 2%;margin-top: 4%;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);height: 214px;">
            <div style="margin-left: 20%;">
              <div style="text-align: left;" @click="changepiechart(1)">
                <p style="color: #F56C6C;font-weight: bolder;">{{ homedata.collectCount }}</p>
                <p style="font-size: 13px;">取件任务</p>
              </div>
              <div style="text-align: left;margin-top: 30%;" @click="changepiechart(2)">
                <p style="color: #F56C6C;font-weight: bolder;">2</p>
                <p style="font-size: 13px;">仓库任务</p>
              </div>
              <div style="text-align: left;margin-top: 30%;" @click="changepiechart(3)">
                <p style="color: #F56C6C;font-weight: bolder;">{{ homedata.paijrenwuCount }}</p>
                <p style="font-size: 13px;">派件任务</p>
              </div>
            </div>
          </Card>

          <Card :dis-hover="true" style="width: 36%;margin-top: 4%;background-color: #F2F6FC;height: 214px;">

            <div style="display: flex;">
              <div style="text-align: left;margin-left: 4%;">
                <p style="color: #409EFF;font-weight: bolder;">{{ homedata.collectbacklogCount }}</p>
                <p style="font-size: 13px;">取件任务待派遣</p>
              </div>
              <div style="text-align: left;margin-left: 10%;">
                <p style="color: #409EFF;font-weight: bolder;">{{ homedata.collectHavebeenCount}}</p>
                <p style="font-size: 13px;">取件任务已派遣</p>
              </div>
              <div style="text-align: left;margin-left: 10%;">
                <p style="color: #409EFF;font-weight: bolder;">{{ homedata.collectdoneCount }}</p>
                <p style="font-size: 13px;">取件任务已完成</p>
              </div>
            </div>

            <div style="display: flex;margin-top: 5%;">
              <div style="text-align: left;margin-left: 4%;">
                <p style="color: #409EFF;font-weight: bolder;">1</p>
                <p style="font-size: 13px;">已出库</p>
              </div>
              <div style="text-align: left;margin-left: 22%;">
                <p style="color: #409EFF;font-weight: bolder;">1</p>
                <p style="font-size: 13px;">已入库</p>
              </div>

            </div>

            <div style="display: flex;margin-top: 5%;">
              <div style="text-align: left;margin-left: 4%;">
                <p style="color: #409EFF;font-weight: bolder;">{{ homedata.paijrenwuCount }}</p>
                <p style="font-size: 13px;">派件任务待派遣</p>
              </div>
              <div style="text-align: left;margin-left: 10%;">
                <p style="color: #409EFF;font-weight: bolder;">{{ homedata.paijunfinishedCount }}</p>
                <p style="font-size: 13px;">派件任务未完成</p>
              </div>
              <div style="text-align: left;margin-left: 10%;">
                <p style="color: #409EFF;font-weight: bolder;">{{ homedata.paijidoneCount }}</p>
                <p style="font-size: 13px;">派件任务已完成</p>
              </div>
            </div>

          </Card>

          <highcharts :options="containersss"></highcharts>

          <Card :dis-hover="true"
            style="margin-top: 4%;;border: none;background: #F2F6FC;height: 214px;margin-right: 4%;width: 130px;">
            <div>
              <div>
                <p style="color: #F56C6C;font-weight: bolder;">{{ containersss.series[0].data[0].y }}</p>
                <p style="font-size: 12px;">{{ containersss.series[0].data[0].name }}</p>
              </div>
              <div style="margin-top: 28%;">
                <p style="color: #F56C6C;font-weight: bolder;">{{ containersss.series[0].data[1].y }}</p>
                <p style="font-size: 12px;">{{ containersss.series[0].data[1].name }}</p>
              </div>
              <div style="margin-top: 28%;">
                <p style="color: #F56C6C;font-weight: bolder;">{{containersss.series[0].data[2]!=null?containersss.series[0].data[2].y:''  }}</p>
                <p style="font-size: 12px;">{{ containersss.series[0].data[2]!=null?containersss.series[0].data[2].name:'' }}</p>
              </div>
            </div>
          </Card>
        </div>


      </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
  import { Chart } from 'highcharts-vue';


  export default {
    components: {
      highcharts: Chart
    },
    data() {
      return {
        homedata:{},
        chartOptions: {
          title: false,
          subtitle: false,
          xAxis: {
            categories: ['07/04', '07/05', '07/06', '07/07', '07/08', '07/09', '07/10', '07/11', '07/12', '07/13', '07/14', '07/15']
          },
          credits: {
            enabled: false,
          },
          yAxis: {
            title: {
              text: '订单总数'
            }
          },

          series: [{
            type: 'column',
            colorByPoint: true,
            data: [8, 5, 6, 4, 2, 5, 9, 2, 3, 4, 2, 1],
            showInLegend: false,

          }]
        },
        containersss: {
          chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
          },
          title: false,
          tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
          credits: {
            enabled: false,
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f}% ',
              }
            }
          },
          series: [{
            name: '取件任务',
            colorByPoint: true,
            data: [{
              name: '取件任务待派遣',
              y: 0,
              sliced: true,
              selected: true
            }, {
              name: '取件任务已派遣',
              y: 0
            }, {
              name: '取件任务已完成',
              y: 0
            }]
          }]
        },
      }
    },
    methods: {
      changepiechart(z){
        //切换图
        if(z==1){
          this.containersss.series[0].data=[
            {name:'取件任务待派遣',y:this.homedata.collectbacklogCount,sliced:true,selected:true},
            {name:'取件任务已派遣',y:this.homedata.collectHavebeenCount},
            {name:'取件任务已完成',y:this.homedata.collectdoneCount}
          ]

        }else if(z==2){
          this.containersss.series[0].data=[
            {name:'已入库',y:2},
            {name:'已出库',y:2},
          ]
        }else{
          this.containersss.series[0].data=[
            {name:'派件任务待派遣',y:this.homedata.collectbacklogCount,sliced:true,selected:true},
            {name:'派件任务未完成',y:this.homedata.collectHavebeenCount},
            {name:'派件任务已完成',y:this.homedata.collectdoneCount}
          ]
        }
        console.log(this.containersss)
      },
      mapChinaOptions(data, formatter) {
        let max = 0;
        let riskMaxPoint = data.map((item) => {
          return item.riskPointNum
        })
        if (data && data.length) {
          max = Math.max(...riskMaxPoint)
        }
        return {
          visualMap: {
            show: false,
            min: 0,
            max: max,
            // inRange: {
            //     color: ['#fae8e9', '#f7a8be', '#f1658b ', '#CB000C']
            // },
          },
          // 暂且不知道做啥子用的
          // geo: {
          //     map: 'china',
          //     // layoutCenter:['10%','5%'],
          //     // center: [104.114129, 35.950339],
          // },
          grid: {
            top: 10,
            bottom: 10,
            width: '1000px',
            height: '500px'
          },
          tooltip: {
            trigger: 'item',
            formatter: formatter ? formatter : '{b}<br/>{c}',
            borderColor: '#CB000C',
            borderWidth: '1'
          },
          dataRange: false,

          series: [
            {
              type: 'map',
              map: 'china',
              itemStyle: {
                areaColor: 'red', //地图的颜色
                borderColor: 'rgba(60,70,88,.5)', //边界线颜色
                borderWidth: '.5', //边界线宽
                emphasis: { // 对应的鼠标悬浮效果
                  color: '#FF0000',
                  areaColor: '#CB000C',
                  borderColor: '#FFF',
                  borderWidth: 1,
                }
              },
              label: {
                fontSize: 12,
                normal: {
                  show: true, // 默认 是否显示省份标签
                  color: '#000',
                },
                emphasis: {
                  show: true, // 鼠标 hover 时是否显示身份标签
                  textStyle: {
                    color: '#fff',
                  },
                },
              },
              data: data
            },

          ]
        }
      },
      queryHome() {
        var x = JSON.parse(sessionStorage.getItem("satoken"));
        this.axios.get("/api/aggregation/pd-core-org/queryshoye/"+x.loginId)
        .then(res => {
          // console.log(res.data)
          this.homedata=res.data
        })
        .catch(err => {
          console.error(err); 
        })
      },
    },
    mounted() {
      let map = this.$echarts.init(this.$refs.chinaMap),
        data = [
          { "name": "北京", "value": 1, "riskNum": 563, "riskPointNum": 69 },
          { "name": "黑龙江", "value": 2, },
          { "name": "天津", "value": 2, },
          { "name": "海南", "value": 2, },
          { "name": "南海诸岛", "value": 2, },
          { "name": "福建", "value": 1, },
          { "name": "辽宁", "value": 2, },
          { "name": "甘肃", "value": 3, },
          { "name": "贵州", "value": 1, },
          { "name": "西藏", "value": 2, },
          { "name": "山西", "value": 4, },
          { "name": "吉林", "value": 6, },
          { "name": "山东", "value": 8, },
          { "name": "河北", "value": 2, },
          { "name": "内蒙古", "value": 1 },
          { "name": "新疆", "value": 2 },
          { "name": "宁夏", "value": 3 },
          { "name": "河南", "value": 5 },
          { "name": "四川", "value": 6 },
          { "name": "江西", "value": 11 },
          { "name": "江苏", "value": 3 },
          { "name": "浙江", "value": 2 },
          { "name": "上海", "value": 11 },
          { "name": "重庆", "value": 8 },
          { "name": "广东", "value": 23 },
          { "name": "湖北", "value": 14 },
          { "name": "广西", "value": 2 },
          { "name": "湖南", "value": 5 },
          { "name": "青海", "value": 6 },
          { "name": "云南", "value": 9 },
          { "name": "安徽", "value": 12 },
          { "name": "陕西", "value": 19 },
          { "name": "台湾", "value": 14 },
        ];


      let options = this.mapChinaOptions(data);

      map.setOption(options);

    },
    created () {
      this.queryHome()

    }

  }
</script>

<style>

</style>